<template>
  <div>
    <el-container>
      <el-header>
        <el-menu :default-active="activPath" class="el-menu-demo" mode="horizontal" @select="handleSelect" menu-trigger="hover" router>
          <el-menu-item index="/welcome">
            <el-image :src="require('../assets/img.png')" style="width: 100px;height: 40px"></el-image>
          </el-menu-item>
          <el-menu-item index="/shiPin" @click="saveActiveNav('/shiPin')">视频</el-menu-item>
          <el-submenu index="/course">
            <template slot="title">课程</template>
            <el-menu-item index="/course/kids" @click="saveActiveNav('/course/kids')">少儿基础</el-menu-item>
            <el-menu-item index="/course/adult" @click="saveActiveNav('/course/adult')">成人基础</el-menu-item>
          </el-submenu>
          <el-menu-item index="/saiShi" @click="saveActiveNav('/saiShi')">赛事</el-menu-item>
          <el-menu-item index="/studio" @click="saveActiveNav('/studio')">工作室</el-menu-item>
          <el-menu-item id="my_padding">
            <el-input id="input_nav"
              placeholder=""
              prefix-icon="el-icon-search"
              v-model="searchInput">
            </el-input>
          </el-menu-item>
          <el-menu-item>
            <el-button size="mini" round class="el-icon-bell"></el-button>
          </el-menu-item>
          <el-menu-item v-if="getStorage() !== 'success' ">
            <div id="my_float">
              <i class="el-icon-user"></i>
              <el-link :underline="false" @click="setVisible">登录</el-link>
            </div>
          </el-menu-item>
          <el-menu-item index="/register" v-if="getStorage() !== 'success'">
            <div id="my_float">
              <el-link :underline="false" type="primary" href="/#/register">注册</el-link>
            </div>
          </el-menu-item>
          <el-menu-item v-if="getStorage() === 'success' ">
            <el-dropdown placement="bottom-start">
              <div>
                <span class="el-dropdown-link">
                  <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" size="small"></el-avatar>
                  {{ username }}
                </span>
              </div>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>我的收藏</el-dropdown-item>
              <el-dropdown-item>个人中心</el-dropdown-item>
              <el-dropdown-item>设置</el-dropdown-item>
              <el-dropdown-item @click.native="delStorage">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          </el-menu-item>
        </el-menu>
      </el-header>
      <el-main>
        <router-view :searchInput="searchInput"></router-view>
      </el-main>
       <el-footer>
         <div>
           <h3 style="text-align: center;color: white">街圈文化模版网站</h3>
           <div class="footer_copyright">
            <span>Copyright 2023 By Lil-hu</span>
           </div>
         </div>
       </el-footer>
    </el-container>
    <div>
      <IndexLoginDialog
        :visibleType="dialogVisible"
        ref="IndexLoginDialog"
        @getVisible="getVisible"
      >
      </IndexLoginDialog>
    </div>
  </div>
</template>
<script>
import IndexLoginDialog from "../components/indexLoginDialog.vue";
  export default {
    components:{IndexLoginDialog},
    data() {
      return {
        activPath: '',
        searchInput: '',
        dialogVisible:false,
        username:localStorage.getItem('username'),
      };
    },
    mounted() {
    },
    methods: {
      saveActiveNav(activePath) {
        sessionStorage.setItem('activePath', activePath);
        this.activePath = activePath
      },
      getStorage() {
        if (localStorage.getItem('loginStatus')) {
          return localStorage.getItem('loginStatus')
        }
      },
      delStorage() {
        window.localStorage.clear()
        window.location.reload()
      },
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      },
      setVisible(){
        this.dialogVisible = true
      },
      getVisible(val){
        this.dialogVisible = val
      },
    }
  }
</script>
<style>
  .el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
  }
  .el-dropdown {
    float: right;
    position: relative;
    left: -15px;
    top: -3px;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
  .demonstration {
    display: block;
    color: #8492a6;
    font-size: 14px;
    margin-bottom: 20px;
  }
#my_float {
  float: right;
  padding: 0 !important;
}
#my_padding {
  padding-left: 450px;
}
#input_nav {
  border-radius: 50px;
  height: 30px;
}
.el-main {
  background-color: #ededed;
}
.el-footer {
  background-color: #272727;
  padding: 20px;
  line-height: 20px;
  height: 120px !important;
  border-top: #272727;
  border-radius: 0 0 20px 20px;
}
/* 点击出来的下划线进行隐藏 */
.el-menu-item.is-active {
  border-bottom: #EBEEF5 !important;
  color: #5691c8 !important;
}
.el-submenu.is-active{
  color: #5691c8 !important;
  border-bottom: #EBEEF5 !important;
}
.el-menu--horizontal>.el-submenu.is-active .el-submenu__title{
    border-bottom: #EBEEF5 !important;
}
.footer_copyright {
  text-align: center;
  color: #666;
  font-size: 15px;
  margin:10px;
}
</style>
